<template>
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    width="1024px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <!-- 交易基础信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>交易基础信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="交易流水号" prop="transId">
              <el-input v-model="formData.transId" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="序列号" prop="messageId">
              <el-input v-model="formData.messageId" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="交易类别" prop="businessType">
              <el-select v-model="formData.businessType" disabled>
                <el-option label="退汇" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务功能" prop="businessUser">
              <el-select v-model="formData.businessUser" disabled>
                <el-option label="大额往账" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="金额" prop="transMoney">
              <el-input v-model="formData.transMoney" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额大写" prop="BigMoney">
              <span style="color: red">{{ formData.BigMoney }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="记账账号" prop="accountingAmount">
              <el-input v-model="formData.accountingAmount" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记账名称" prop="accountingName">
              <el-input v-model="formData.accountingName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="记账状态" prop="accountingMark">
              <el-select v-model="formData.accountingMark" disabled>
                <el-option label="成功" value="1"></el-option>
                <el-option label="失败" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易日期" prop="transactionDate">
              <el-input v-model="formData.transactionDate" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="分行" prop="office">
              <el-input v-model="formData.office" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="删除标记" prop="cancelFlag">
              <el-input v-model="formData.cancelFlag" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 错误信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>错误信息</span>
        </div>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="错误码" prop="errorCode">
              <el-input v-model="formData.errorCode" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="错误信息" prop="errorInfo">
              <el-input v-model="formData.errorInfo" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 付款人信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="付款人账号" prop="payerAccount">
              <el-input v-model="formData.payerAccount" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人名称" prop="payerName">
              <el-input v-model="formData.payerName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="付款行行号" prop="payerBankNo">
              <el-input v-model="formData.payerBankNo" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款行行名" prop="payerBankName">
              <el-input v-model="formData.payerBankName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="付款人开户行号" prop="payerOpenBankNum">
              <el-input v-model="formData.payerOpenBankNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人开户行行名" prop="payerOpenBankName">
              <el-input v-model="formData.payerOpenBankName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 收款人信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="收款人账号" prop="payeeAccount">
              <el-input v-model="formData.payeeAccount" placeholder="" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款人名称" prop="payeeName">
              <el-input v-model="formData.payeeName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="收款行行号" prop="payeeBankNo">
              <el-input v-model="formData.payeeBankNo" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款行行名" prop="payeeBankName">
              <el-input v-model="formData.payeeBankName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="收款人开户行号" prop="payeeOpenBankNum">
              <el-input v-model="formData.payeeOpenBankNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人开户行行名" prop="payeeOpenBankName">
              <el-input v-model="formData.payeeOpenBankName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>BOP信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人身份" prop="payerIdentity">
              <el-select v-model="formData.payerIdentity" disabled placeholder="">
                <el-option label="居民" value="1"></el-option>
                <el-option label="非居民" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人性质" prop="payerNature">
              <el-select v-model="formData.payerNature" disabled placeholder="">
                <el-option label="单位" value="1"></el-option>
                <el-option label="个人" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="货物贸易交易" prop="goodsTradeTrans">
              <el-select v-model="formData.goodsTradeTrans" disabled placeholder="">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 行内信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>行内信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="业务状态" prop="businessStatus">
              <el-select v-model="formData.businessStatus" disabled>
                <el-option label="待录入" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务处理码" prop="ServProcessCode">
              <el-input v-model="formData.ServProcessCode" disabled placeholder="请输入业务处理码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="录入操作员" prop="entryOperator">
              <el-input v-model="formData.entryOperator" disabled placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间" prop="entryTime">
              <el-date-picker
                v-model="formData.entryTime"
                type="datetime"
                disabled
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder=""
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row v-if="status == '7' || status == '5'">
          <el-col :span="24">
            <el-form-item label="拒绝原因" prop="rejectReason">
              <el-input type="textarea" v-model="formData.rejectReason" placeholder="请输入拒绝原因" />
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row v-if="status == '1' || status == '2' || status == '3' || status == '4' || status == '5' || status == '7'">
          <el-col :span="24">
            <el-form-item label="被驳回原因" prop="rejectReason">
              <el-input type="textarea" disabled v-model="formData.rejectReason" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <el-row slot="footer">
        <el-col v-if="status == '8' || status == '6' || status == '9'" :span="2" :offset="9">
          <el-button type="primary" @click="paySuccess">再记账</el-button>
        </el-col>
        <el-col v-else :span="2" :offset="8">
          <el-button type="primary" @click="paySuccess">再记账</el-button>
        </el-col>
        <el-col v-if="status == '1' || status == '3'" :span="2" :offset="1">
          <el-button type="danger" @click="reject">交易退回</el-button>
        </el-col>
        <el-col v-if="status == '2' || status == '4'" :span="2" :offset="1">
          <el-button type="danger" @click="reject">取消</el-button>
        </el-col>
        <el-col v-if="status == '7' || status == '5'" :span="2" :offset="1">
          <el-button type="danger" @click="reject">拒绝</el-button>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button @click="close">关闭</el-button>
        </el-col>
      </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: "chargeHandelDetailDialog",
  data() {
    return {
      currentPage4: 1, // 分页
      title: "",
      openState: false, // 是否显示弹出层
      status: "", // 业务功能种类
      personFlag: "", // 录入 复核 授权
      form: {},
      formData: {
        // 交易基础信息
        transId: "HVPS2023111500577221", // 交易流水号
        businessUser: "1", // 业务功能
        messIdentNum: "2023110800123494", // 报文标识号
        InlineSerialNum: "5001", // 行内流水号
        cgpDate: "2023-11-15", // CPG日期
        workDate: "2023-11-08", // 工作日期
        liquidationDate: "2023-11-15", // 清算日期
        businessType: "A201-支票", // 交易类别
        businessKind: "03401", // 业务种类
        bizPriority: "NORM-普通", // 业务优先级
        transChannel: "1-CPG柜面", // 交易渠道
        accountingMark: "2", // 记账标志
        accountType: "I-对私", // 账户类型
        transCurrency: "CNY", // 交易币种
        OrigTransNum: "", // 原交易流水号
        category: "客户", // 类别
        accountingAmount: "324134234556", // 记账账号
        accountingName: "张三", // 记账名称

        // 付款人信息
        debitAccount: "14325463241321324", // 借方账号
        debitName: "张三", //借方户名
        payerAccount: "14325463241321324", // 付款人账号
        payerName: "张三", // 付款人名称
        payerAddress: "", // 付款人地址
        payerBankNo: "4675465674567", // 付款行行号
        payerBankName: "中国建设银行", // 付款行行名
        payerOpenBankNum: "14325463241321324", // 付款人开户行号
        payerOpenBankName: "中国建设银行", // 付款人开户行行名

        // 收款人信息
        payeeAccount: "14325463241321324", // 收款人账号
        payeeName: "张三", // 收款人名称
        payeeAddress: "", // 收款人地址
        payeeBankNo: "4675465674567", // 收款行行号
        payeeBankName: "中国建设银行", // 收款行行名
        payeeOpenBankNum: "14325463241321324", // 收款人开户行号
        payeeOpenBankName: "中国建设银行", // 收款人开户行行名

        // 其他交易信息
        transMoney: "77,778", // 金额
        BigMoney: "柒万柒仟柒佰柒拾捌元整", // 大写金额
        chargeMoney: "", // 手续费金额
        interAgency1: "", // 中介机构1
        interAgencyName1: "", // 中介机构1名称
        interAgency2: "", // 中介机构2
        interAgencyName2: "", // 中介机构2名称
        remarks: "", // 备注
        postscript: "", // 附言

        // 支票附加域信息
        DrawDate: "2023-11-15", // 出票日期
        DrawNum: "1223455245243", // 票据号码
        DrawName: "王五", // 出票人名称
        DrawCount: "12", // 票据张数
        DrawMoney: "1000,000,00", // 票据金额
        listPrice: "99,999,990", // 牌价

        // 行内信息
        businessStatus: "待录入", // 业务状态
        communiStatus: "02-已发送", // 通讯状态
        centerStatus: "PR04-已清算", // 中心状态
        ServProcessCode: "CB1I0000", // 业务处理码
        bizRejectInfo: "", // 业务拒绝信息
        nonStpType: "", // non-stp类型
        nonStpReason: "", // non-STP原因
        entryOperator: "李四", // 录入操作员
        entryTime: "2023-12-11 15:59:10", // 录入时间
        BankStatus: "", // 行内状态
        checkOperator: "韩二", // 复核操作员
        checkTime: "2023-12-07 15:59:10", // 复核时间
        chargeStatus: "", // 记账状态
        examiner: "韩三", // 审核操作员
        examineTime: "2023-12-07 15:59:10", // 审核时间
        authOperator: "韩三", // 授权操作员
        authTime: "2023-12-07 15:59:10", // 授权时间
        checkMemo: "", // 复核附言
        examineMemo: "", // 录入附言
        authMemo: "", // 授权附言

        // 附加数据域
        identiNo: "", //   原报文标识号
        initiator: "", //原发起机构
        initiatorName: "", //原发起机构名
        identiTypeCode: "", //原报文类型代码
        reexchReason: "", // 退汇原因

        // BOP信息
        payerIdentity: "1", // 付款人身份
        payerNature: "2", // 付款人性质
        goodsTradeTrans: "1", // 货物贸易交易

        office: "上海分行", // 分行
        cancelFlag: "已删除", // 删除标记
        messageId: "2423452135", // 序列号
        transactionDate: "2023-12-08", // 交易日期
        rejectReason: "被驳回原因", // 被驳回原因

        errorCode: "07", // 错误码
        errorInfo: "This Tran(E2E ID) is duplicate", // 错误信息
      },
      rules: {},
      tableData: [],
    };
  },

  methods: {
    handleClose() {
      this.openState = false;
    },

    show(row, flag) {
      //console.log(row, "detail show----------");
      //console.log(flag, "flag----------");
      this.title = "记账处理详细";
      this.openState = true;
      this.status = "";

      switch (row.businessUser) {
        case "大额来账":
          console.log("大额来账---");
          this.status = "1";
          break;
        case "大额往账":
          console.log("大额往账---");
          this.status = "2";
          break;
        case "小额贷记来账":
          console.log("小额贷记来账---");
          this.status = "3";
          break;
        case "小额贷记往账":
          console.log("小额贷记往账---");
          this.status = "4";
          break;
        case "小额借记来账":
          console.log("小额借记来账---");
          this.status = "5";
          break;
        case "小额借记往账":
          console.log("小额借记往账---");
          this.status = "6";
          break;
        case "批量收付付款行":
          console.log("批量收付付款行---");
          this.status = "7";
          break;
        case "批量收付收款行":
          console.log("批量收付收款行---");
          this.status = "8";
          break;
        case "实时代收付收款行":
          console.log("实时代收付收款行---");
          this.status = "9";
          break;
        default:
          break;
      }
    },

    // 拒绝
    reject() {
      console.log("拒绝");
      this.openState = false;
    },

    // 确认
    paySuccess() {
      console.log("确认");
      this.openState = false;
    },

    // 关闭
    close() {
      console.log("关闭");
      this.openState = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped>
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000000 !important;
}
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  height: 5%;
  margin-top: -5px;
  margin-left: 92%;
  font-size: 28px;
}
.block {
  float: right;
  margin-top: 10px;
}
</style>
